<template>
  <div>
    <el-form :inline="true" :model="roleForm" class="demo-form-inline">
      <el-form-item label="角色名称:">
        <el-input v-model="roleForm.roleName" clearable></el-input>
      </el-form-item>
      <el-form-item label="权限字符:">
        <el-input v-model="roleForm.roleKey" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色状态:">
        <el-select v-model="roleForm.status" clearable>
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间:">
        <!--        <el-date-picker-->
        <!--            v-model="roleForm.startTime"-->
        <!--            type="date"-->
        <!--            value-format="yyyy-MM-dd"-->
        <!--            placeholder="开始日期">-->
        <!--        </el-date-picker>-->
        <!--        - -->
        <!--        <el-date-picker-->
        <!--            v-model="roleForm.endTime"-->
        <!--            type="date"-->
        <!--            value-format="yyyy-MM-dd"-->
        <!--            placeholder="结束日期">-->
        <!--        </el-date-picker>-->
        <el-date-picker
            v-model="startandend"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-tag @click="openadd">新增</el-tag>
    <el-tag @click="openupdate">修改</el-tag>
    <el-tag @click="del">删除</el-tag>
    <el-tag @click="pdf">导出pdf</el-tag>
    <el-tag @click="excel">导出excel</el-tag>
    <el-upload
        class="upload-demo"
        action="http://localhost:9999/role/upload"
        multiple
       limit="3">
      <el-button size="small" type="primary">导入</el-button>
    </el-upload>
    <el-table
        ref="multipleTable"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="roleId"
          label="角色编号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="角色名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleKey"
          label="权限字符"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dataScope"
          label="数据权限"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleSort"
          label="显示顺序"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="角色状态"
          width="100">
        <template v-slot="scope">
          <el-tooltip :content="'Switch value: ' + scope.row.status" placement="top">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="0"
                inactive-value="1">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="220">
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button type="danger" @click="shan(scope.row.roleId)">删除</el-button>
          <el-button type="primary" @click="gai(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加/修改" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限字符" :label-width="formLabelWidth" prop="roleKey">
          <el-input v-model="form.roleKey" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" :label-width="formLabelWidth" prop="roleSort">
          <el-input v-model="form.roleSort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据权限" :label-width="formLabelWidth" prop="dataScope">
          <el-input v-model="form.dataScope" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-tooltip :content="'Switch value: ' + form.status" placement="top">
            <el-switch
                v-model="form.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="0"
                inactive-value="1">
            </el-switch>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-tree
              ref="tree"
              :data="menuData"
              show-checkbox
              node-key="id"
              :default-expand-all="flag"
              :default-checked-keys="mids"
              :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="resetForm('form')">重 置</el-button>
        <el-button type="primary" @click="saveandupdate('form')">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
        @current-change="gopage"
        :page-size="roleForm.pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import roleService from "@/api/roleService";

export default {
  data() {
    return {
      roleForm: {
        pageNum: 1,
        pageSize: 3,
        startTime: '',
        endTime: ''
      },
      mids: [],
      flag: false,
      menuData: [],
      startandend: [],
      tableData: [],
      total: 0,
      multipleSelection: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {},
      rules: {
        roleName: [
          {required: true, message: '请输入角色名称', trigger: 'blur'},
        ],
        roleKey: [
          {required: true, message: '请输入权限字符', trigger: 'blur'},
        ],
        roleSort: [
          {required: true, message: '请输入显示顺序', trigger: 'blur'},
        ],
        dataScope: [
          {required: true, message: '请输入数据权限', trigger: 'blur'},
        ]
      },
      menuTree: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    list() {
      if (this.startandend != null) {
        this.roleForm.startTime = this.startandend[0];
        this.roleForm.endTime = this.startandend[1];
      }
      roleService.list(this.roleForm).then(r => {
        this.tableData = r.data.data.list;
        this.total = r.data.data.total;
      })
    },
    gopage(num) {
      this.roleForm.pageNum = num;
      this.list();
    },
    openadd() {
      this.form = {};
      this.mids=[];
      this.dialogFormVisible = true;
      this.menuTreeData();
    },
    saveandupdate(formName) {

      let mids = this.$refs.tree.getCheckedKeys();


      let id = this.form.roleId;
      if (!id) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.mids = mids;
            roleService.save(this.form).then(() => {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.list();
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });

      } else {

        this.form.mids = mids;
        roleService.update(this.form).then(() => {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.list();
        })

      }

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    openupdate() {
      this.menuTreeData();
      let id = this.multipleSelection.map(o => o.roleId);
      roleService.listById(id).then(r => {
        this.form = r.data.data;
        this.dialogFormVisible = true;
      });
      roleService.listByRoleId(id).then(r=>{
          this.mids=r.data.data;
      })
    },
    gai(row) {
      this.form = row;
      this.dialogFormVisible = true;
      this.menuTreeData();
      roleService.listByRoleId(row.roleId).then(r=>{
        this.mids=r.data.data;
      })
    },
    shan(id) {
      roleService.del(id).then(() => {
        this.$message.success("删除成功");
        this.list();
      })
    },
    del() {
      let id = this.multipleSelection.map(o => o.roleId);
      roleService.del(id).then(() => {
        this.$message.success("删除成功");
        this.list();
      })
    },
    pdf() {
      roleService.pdf().then(() => {
        this.$message.success("导出pdf成功");
      })
    },
    excel() {
      location.href = "http://localhost:9999/role/down";
    },
    menuTreeData() {
      roleService.menuTree().then(r => {
        this.menuData = r.data.data;
      })
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>